<template>
	<view class="hospital-wrap" @click="onClick">
		<view class="hospital-main">
			<view class="hospital-left"><image :src="data.avatar" class="hospital-left-img"></image></view>
			<view class="hospital-right">
				<view lines="1" class="hospital-right-name">{{ data.hospName }}</view>

				<view class="hospital-right-section">
					<view class="hospital-right-type">
						<text lines="1" class="word4">{{ data.grade }}</text>
						<text lines="1" class="word5">{{ data.hospType }}</text>
					</view>

					<view v-if="distanceShow" class="hospital-right-distance">{{ distance }}km</view>
					
				</view>
				
				
				<view class="hospital-address" @click.stop="openLocation">
					<!-- <view class="hospital-address-name">地址</view> -->
					<view class="hospital-address-info">
						<view class="txt8">{{ data.address }}</view>
						<image src="http://k8s.vendingtech.vip/images/next_icon@2x.png" class="label3"></image>
					</view>
				</view>
				
			</view>
		</view>

		
	</view>
</template>

<script>
import { getDistance } from '@/utils/util.js';
import { mapState, mapMutations } from 'vuex';
export default {
	props: {
		data: {
			type: Object,
			default() {
				return {};
			}
		},
		distanceShow: {
			type: Boolean,
			default: true
		}
	},
	computed: {
		...mapState({
			positionName: state => state.positionName,
			positionRegion: state => state.positionRegion,
			longitude: state => state.longitude,
			latitude: state => state.latitude
		}),
		distance() {
			return getDistance(this.data.latitude, this.data.longitude, this.latitude, this.longitude);
		}
	},
	data() {
		return {};
	},
	onLoad(option) {},
	onShow() {},
	methods: {
		onClick() {
			this.$emit('click');
		},

		openLocation() {
			uni.openLocation({
				latitude: this.data.latitude,
				longitude: this.data.longitude,
				success: res => {
					console.log('success');
				}
			});
		}
	}
};
</script>

<style lang="less">
.hospital-wrap {
	.hospital-main {
		display: flex;
		.hospital-left {
			width: 200rpx;
			height: 140rpx;
			border-radius: 8rpx;
			overflow: hidden;
			margin-right: 20rpx;
			padding: 20rpx 0;
			// box-sizing: border-box;
			.hospital-left-img {
				width: 200rpx;
				height: 140rpx;
			}
		}

		.hospital-right {
			width: 406rpx;
			.hospital-right-name {
				color: rgba(51, 51, 51, 1);
				font-size: 28rpx;
				font-family: PingFangSC-Regular;
				// height: 100rpx;
				display: flex;
				align-items: center;
				padding: 16rpx 0 18rpx;
				box-sizing: border-box;
			}
			.hospital-right-section {
				z-index: auto;
				width: 406rpx;
				// height: 34rpx;
				flex-direction: row;
				display: flex;
				padding-bottom: 20rpx;
				.hospital-right-type {
					display: flex;
					.word4 {
						width: 60rpx;
						display: block;
						color: #6E99C7;
						font-size: 24rpx;
						font-family: PingFangSC-Medium;
						overflow: hidden;
					}

					.word5 {
						width: 200rpx;
						display: block;
						color: rgba(153, 153, 153, 1);
						font-size: 24rpx;
						font-family: PingFangSC-Regular;
						margin-left: 20rpx;
						overflow: hidden;
					}
				}

				.hospital-right-distance {
					margin-left: auto;
					color: rgba(51, 51, 51, 1);
					font-size: 28rpx;
					font-family: PingFangSC-Regular;
				}
			}
		}
	}

	.hospital-address {
		display: flex;
		align-items: center;
		justify-content: space-between;
		.hospital-address-name {
			color: rgba(51, 51, 51, 1);
			font-size: 28rpx;
			font-family: PingFangSC-Medium;
			font-weight: bold;
		}
		.hospital-address-info {
			display: flex;
			width: 100%;
			align-items: center;
			.txt8 {
				color: rgba(51, 51, 51, 1);
				font-size: 24rpx;
				font-family: PingFangSC-Regular;
			}
			.label3 {
				width: 24rpx;
				height: 24rpx;
				margin-left: auto;
			}
		}
	}
}
</style>
